<template>
  <div class="feedBack">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('问题或建议')}}</div>
      </div>
    </div>
    <div class="feed_back_box">
      <p>Questions and Comments<span style="color: red">*</span></p>
      <div class="box_item">
        <van-field
            style="background-color: #ffffff;border-bottom: 1px solid #999999"
            v-model="value"
            rows="4"
            autosize
            type="textarea"
            maxlength="500"
            :placeholder="$t('请输入问题描述我们可以帮助你')"
            show-word-limit
        >
        </van-field>
      </div>
      <p>picture</p>
      <div  class="box_item">
        <van-uploader class="upload" style="width: 100%;height: 100%;" accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                      capture="camera" v-model="fileList" multiple :before-read="beforeRead"
                      :max-count="1"/>
      </div>
    </div>
    <div style="text-align: center;margin-top: 25px;padding: 0 20px">
      <van-button style="width: 100%" round type="primary" @click="confirm">{{ $t('提交') }}</van-button>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import {addFeedBack} from '@/api/my'
import {Toast} from "vant";
import {useI18n} from 'vue-i18n'
import router from "@/router";
import {compressImage, debounce} from '@/utils/tool'
import {useStore} from "vuex";

export default {
  setup() {
    const value = ref('')
    const fileList = ref([])
    const store = useStore()
    const {t} = useI18n()
    const beforeRead = (file) => {
      return new Promise(async (resolve, reject) => {
        const fileType = ['image/jpeg', 'image/png', 'image/jpg']
        if (fileType.indexOf(file.type) === -1) {
          Toast('upload_image');
          reject()
        } else if (file.size < Math.pow(1024, 2)) {
          // 小于1m不压缩
          resolve(file)
        } else {
          // 压缩图片
          const caseFile = await compressImage(file)
          resolve(caseFile)
        }
      })
    }
    const confirm = debounce(
        async () => {
          if (value.value.length < 5) return Toast({message: t('请输入至少于5位数的问题反馈')})
          const file = fileList.value.length ? fileList.value[0].file : ''
          const formData = new FormData()
          formData.append('file', file)
          formData.append('content', value.value)
          const res = await addFeedBack(formData)
          if (res.code === 1) {
            Toast({
              message: t('提交成功')
            })
            router.go(-1)
          }
        }
    )
    // 清除loading
    store.dispatch('changeLoading', false)
    return {
      value,
      beforeRead,
      fileList,
      confirm
    }
  }
}
</script>

<style scoped lang="less">
.feedBack {
  overflow: auto;

  .feed_back_box {
    padding: 15px;
    font-size: 16px;
    background-color: #F7F7F7;
    margin-top: -150px;
    border-radius: 10px;
    .box_item {
      background-color: #ffffff;
      box-sizing: border-box;
      padding:  15px;
      margin-top: 20px;
      border-radius: 6px;
    }

    .upload {
      height: 150px;
      width: 100px;
    }
  }
}
</style>
